<template>
  <div>
    <h1 ref="heading">歌手详情: {{ artist.name }}</h1>
    <img :src="artist.picUrl" width="200" alt="">
    <h3>单曲数：{{ artist.musicSize }}</h3>
    <h3>MV数：{{ artist.mvSize }}</h3>
    <hr>
    <nav>
      <router-link :to="{ name: 'artist-songs', params: { id: $route.params.id } }">专辑</router-link> |
      <router-link :to="{ name: 'artist-mv', params: { id: $route.params.id } }">MV</router-link> |
      <router-link :to="{ name: 'artist-detail', params: { id: $route.params.id } }">歌手详情</router-link> |
      <router-link :to="{ name: 'artist-simi', params: { id: $route.params.id } }">相似歌手</router-link>
    </nav>
    <hr>
    <router-view/>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      artist: {},
      hotSongs: [],
    }
  },
  created() {
    const { id } = this.$route.params
    // 歌手详情
    axios({
      url: 'http://localhost:3000/artists?id='+ id
    }).then(res => {
      console.log(res)
      this.hotSongs = res.data.hotSongs
      this.artist = res.data.artist
    })

    // 歌手的描述
    axios({
      url: 'http://localhost:3000/artist/desc?id='+ id
    }).then(() => {
      // console.log(res)
      // this.artist = res.data
    })
  },
  methods: {

  }
}
</script>

<style scoped>
ol li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #42b983;
  padding: 3px 0;
}
</style>
